<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
    <link rel="stylesheet" href="./assets/shared.css" />
    <title>Microsoft Days in the Web - Welcome</title>
  </head>
  <body class="ms-Fabric">
    <div class="Container">
      <h1>Frontend Bootcamp <a href="https://github.com/Microsoft/frontend-bootcamp">View on GitHub</a></h1>
    </div>
    <div class="Container">
      <ul class="Tiles">
        <li class="Tile Tile--intro">
          <h2>Day 1</h2>
          Get set up and learn to build a todo app using HTML, CSS, JavaScript, and React.
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            Intro to HTML
            <div class="Tile-links">
              <a target="_blank" href="./step1-01/lesson/">lesson</a> | <a target="_blank" href="./step1-01/demo/">demo</a> |
              <a target="_blank" href="./step1-01/exercise/">exercise</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            Intro to CSS
            <div class="Tile-links">
              <a target="_blank" href="./step1-02/lesson/">lesson</a> | <a target="_blank" href="./step1-02/demo/">demo</a> |
              <a target="_blank" href="./step1-02/exercise/">exercise</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            Intro to JS
            <div class="Tile-links">
              <a target="_blank" href="./step1-03/lesson/">lesson</a> | <a target="_blank" href="./step1-03/demo/">demo</a> |
              <a target="_blank" href="./step1-03/exercise/">exercise</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            React Intro
            <div class="Tile-links">
              <a target="_blank" href="./step1-04/lesson/">lesson</a> | <a target="_blank" href="./step1-04/demo/">demo</a> |
              <a target="_blank" href="./step1-04/final/">final</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            React Components
            <div class="Tile-links">
              <a target="_blank" href="./step1-05/demo/">demo</a> | <a target="_blank" href="./step1-05/exercise/">exercise</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            State-Driven UI
            <div class="Tile-links">
              <a target="_blank" href="./step1-06/demo/">demo</a> | <a target="_blank" href="./step1-06/exercise/">exercise</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            Types & <br />UI-Driven State
            <div class="Tile-links">
              <a target="_blank" href="./step1-07/demo/">demo</a> | <a target="_blank" href="./step1-07/exercise/">exercise</a> |
              <a target="_blank" href="./step1-07/final/">final</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="Container">
      <ul class="Tiles">
        <li class="Tile Tile--intro">
          <h2>Day 2</h2>
          Take your todo app to the next level with TypeScript, Fabric React, and Redux.
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            TypeScript Basics
            <div class="Tile-links">
              <a target="_blank" href="./step2-01/demo/">demo</a> | <a target="_blank" href="./step2-01/exercise/">exercise</a> |
              <a target="_blank" href="./step2-01/final/">final</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            UI Fabric
            <div class="Tile-links">
              <a target="_blank" href="./step2-02/demo/">demo</a> | <a target="_blank" href="./step2-02/exercise/">exercise</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            Theming and Styling
            <div class="Tile-links">
              <a target="_blank" href="./step2-03/demo/">demo</a> | <a target="_blank" href="./step2-03/exercise/">exercise</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            React Context
            <div class="Tile-links">
              <a target="_blank" href="./step2-04/demo/">demo</a> | <a target="_blank" href="./step2-04/exercise/">exercise</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            Redux: The Store
            <div class="Tile-links">
              <a target="_blank" href="./step2-05/demo/">demo</a> | <a target="_blank" href="./step2-05/exercise/">exercise</a>
            </div>
          </div>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            Redux: React Binding
            <div class="Tile-links">
              <a target="_blank" href="./step2-06/demo/">demo</a> | <a target="_blank" href="./step2-06/exercise/">exercise</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="Container">
      <ul class="Tiles">
        <li class="Tile Tile--intro">
          <h2>Bonus Content</h2>
          Some Extra Bonus Lessons!! Yay! Bonus!!
        </li>
        <li class="Tile Tile--numbered">
          <a target="_blank" href="./bonus-servicecalls/demo/" class="Tile-link"> Redux: Service Calls </a>
        </li>
        <li class="Tile Tile--numbered">
          <div class="Tile-link">
            Testing with Jest
            <div class="Tile-links">
              <a target="_blank" href="./bonus-jest/demo/">demo</a> | <a target="_blank" href="./bonus-jest/exercise/">exercise</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="Container">
      <ul class="Tiles">
        <li class="Tile Tile--intro">
          <h2>Playground</h2>
          Build your app here!
        </li>
        <li class="Tile Tile--unnumbered"><a target="_blank" href="./playground/" class="Tile-link">Playground</a></li>
      </ul>
    </div>
    <script src="./assets/scripts.js"></script>
  </body>
</html>
